<template>
  <div id="airpods" v-if="data">
    <div class="t1">
      <div class="center">
        <div class="t">
          <p>购买AirPods,Apple Music 免费试听六个月*。</p>
          <a href="#">进一步了解></a>
        </div>
      </div>

      <div class="f">
        <div class="bc">
          <p>AirPods</p>
          <p>第三代</p>
          <p>RMB 1399</p>
          <button>
            <router-link to="/airPods3">购买</router-link>
          </button>
          <a>进一步了解></a>
        </div>
        <video
          id="vd"
          loop
          muted
          autoplay="autoplay"
          style="width: 100%; border-radius: 30px"
          :src="data[`large.mp4`]"
        ></video>
        <button id="btn_play" @click="videoCtrl">暂停</button>
      </div>

      <div class="f1">
        <div class="bc1">
          <div class="n">
            <p>AirPods Pro</p>
            <p>RMB 1399</p>
          </div>
          <div class="n1">
            <button>
              <router-link to="/airpodsPro">购买</router-link>
            </button>
            <a href="#">进一步了解></a>
          </div>
        </div>
        <div class="bc2">
          <div>
            <img :src="data[`airpods_pro_left__bvanpj0ujnf6_medium.png`]" />
          </div>
          <div>
            <img :src="data[`airpods_pro_right__fm0wwisa76em_medium.png`]" />
          </div>
        </div>
      </div>

      <div class="f2">
        <div class="bc3">
          <img :src="data[`airpods_max__f265q4g4ddym_medium.png`]" />
        </div>
        <div class="bc4">
          <img :src="data[`airpods_max_logo__bdgdixidcqcy_medium.jpg`]" />
          <p>RMB &nbsp; 4399</p>
          <div class="buy">
            <a href="#" class="buy-button">
              <span>
                <router-link to="/airPodsMax" style="color: #fff"
                  >购买</router-link
                >
              </span>
            </a>
            <a href="#">进一步了解></a>
          </div>
        </div>
      </div>

      <div class="f3">
        <div class="t2">
          <p>AirPods</p>
          <p>第二代</p>
          <p>RMB 999</p>
        </div>
        <div class="bc5">
          <img :src="data[`airpods_2ndgen_left__gjpt8k836yy6_medium.png`]" />
        </div>
        <div class="bc6">
          <img :src="data[`airpods_2ndgen_right__gahfggwvcx6q_medium.png`]" />
        </div>
        <div class="buy1">
          <a href="#">
            <button>
              <router-link to="/airPods2">购买</router-link>
            </button>
          </a>
          <a href="#">进一步了解></a>
        </div>
      </div>

      <div class="t3">
        <p>跨各种设备&nbsp;&nbsp;巧妙连接</p>
      </div>

      <div class="f4">
        <div class="t4">
          <swiper class="swiper" :options="swiperOption" width="1700px">
            <swiper-slide class="swiperSli">
              <img
                class="abc"
                :src="data[`tile_onetap_setup__fzj1m8dhjoq6_medium.jpg`]"
              />
              <ol>
                <p>单点设置</p>
                <li>
                  <a href="">
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      viewBox="0 0 20 20"
                      height="20"
                      width="20"
                    >
                      <g fill="#000" fill-rule="evenodd">
                        <path
                          d="M17.25,8.51H11.5V2.75A1.5,1.5,0,0,0,10,1.25h0a1.5,1.5,0,0,0-1.5,1.5V8.5H2.75a1.5,1.5,0,0,0,0,3H8.5v5.75a1.5,1.5,0,0,0,1.5,1.5h0a1.5,1.5,0,0,0,1.5-1.5V11.5h5.75a1.5,1.5,0,0,0,0-3Z"
                        ></path>
                      </g>
                    </svg>
                  </a>
                </li>
              </ol>
            </swiper-slide>
            <swiper-slide class="swiperSli">
              <img
                :src="data[`tile_automatic_switching__etjisgj91gk2_medium.jpg`]"
              />

              <ol>
                <p>自动切换</p>
                <li>
                  <a href="">
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      viewBox="0 0 20 20"
                      height="20"
                      width="20"
                    >
                      <g fill="#000" fill-rule="evenodd">
                        <path
                          d="M17.25,8.51H11.5V2.75A1.5,1.5,0,0,0,10,1.25h0a1.5,1.5,0,0,0-1.5,1.5V8.5H2.75a1.5,1.5,0,0,0,0,3H8.5v5.75a1.5,1.5,0,0,0,1.5,1.5h0a1.5,1.5,0,0,0,1.5-1.5V11.5h5.75a1.5,1.5,0,0,0,0-3Z"
                        ></path>
                      </g>
                    </svg>
                  </a>
                </li>
              </ol>
            </swiper-slide>
            <swiper-slide class="swiperSli">
              <img :src="data[`tile_audio_sharing__ord9ku1kssq6_medium.jpg`]" />
              <ol>
                <p>音频共享</p>
                <li>
                  <a href="">
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      viewBox="0 0 20 20"
                      height="20"
                      width="20"
                    >
                      <g fill="#000" fill-rule="evenodd">
                        <path
                          d="M17.25,8.51H11.5V2.75A1.5,1.5,0,0,0,10,1.25h0a1.5,1.5,0,0,0-1.5,1.5V8.5H2.75a1.5,1.5,0,0,0,0,3H8.5v5.75a1.5,1.5,0,0,0,1.5,1.5h0a1.5,1.5,0,0,0,1.5-1.5V11.5h5.75a1.5,1.5,0,0,0,0-3Z"
                        ></path>
                      </g>
                    </svg>
                  </a>
                </li>
              </ol>
            </swiper-slide>
            <swiper-slide class="swiperSli">
              <p class="d4-colorText">嘿 Siri,<br />来点健身<br />听的歌</p>
              <ol>
                <p>siri 随时待命</p>
                <li>
                  <a href="">
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      viewBox="0 0 20 20"
                      height="20"
                      width="20"
                    >
                      <g fill="#000" fill-rule="evenodd">
                        <path
                          d="M17.25,8.51H11.5V2.75A1.5,1.5,0,0,0,10,1.25h0a1.5,1.5,0,0,0-1.5,1.5V8.5H2.75a1.5,1.5,0,0,0,0,3H8.5v5.75a1.5,1.5,0,0,0,1.5,1.5h0a1.5,1.5,0,0,0,1.5-1.5V11.5h5.75a1.5,1.5,0,0,0,0-3Z"
                        ></path>
                      </g>
                    </svg>
                  </a>
                </li></ol
            ></swiper-slide>
            <swiper-slide class="swiperSli">
              <span class="cai">
                <img
                  :src="
                    data[`tile_announce_notifications__f2jmuafd1wey_large.jpg`]
                  "
                />
                <p>老妈说：我现在去买菜&nbsp;你想吃什么？</p>
              </span>
              <ol>
                <p>播报通知</p>
                <li>
                  <a href="">
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      viewBox="0 0 20 20"
                      height="20"
                      width="20"
                    >
                      <g fill="#000" fill-rule="evenodd">
                        <path
                          d="M17.25,8.51H11.5V2.75A1.5,1.5,0,0,0,10,1.25h0a1.5,1.5,0,0,0-1.5,1.5V8.5H2.75a1.5,1.5,0,0,0,0,3H8.5v5.75a1.5,1.5,0,0,0,1.5,1.5h0a1.5,1.5,0,0,0,1.5-1.5V11.5h5.75a1.5,1.5,0,0,0,0-3Z"
                        ></path>
                      </g>
                    </svg>
                  </a>
                </li></ol
            ></swiper-slide>
          </swiper>
        </div>
      </div>

      <div class="f5">
        <div class="center980">
          <div>
            <h2>哪款 AirPods<br />适合你？</h2>
          </div>
        </div>
      </div>
      <!--  -->
      <div class="f6">
        <div class="center980">
          <div class="earphone">
            <div class="airpods">
              <div>
                <img
                  :src="
                    data[`compare_airpods_2nd_gen__fw52r8rxrpyu_medium.png`]
                  "
                />
              </div>
              <div class="text">
                <p class="p1">AirPods</p>
                <p>第二代</p>
                <p>RMB 999 起</p>
                <button>
                  <router-link to="/airPods2">购买</router-link>
                </button>
                <a href="#">进一步了解 > </a>
              </div>
            </div>
            <div class="airpods1">
              <div>
                <img
                  :src="
                    data[`compare_airpods_3rd_gen__dyuzfy04ht0m_medium.png`]
                  "
                />
              </div>
              <div class="text">
                <p class="p1">AirPods</p>
                <p>第三代</p>
                <p>RMB 1399 起</p>
                <button>
                  <router-link to="/airPods3">购买</router-link>
                </button>
                <a href="#">进一步了解 > </a>
              </div>
            </div>
            <div class="airpodspro">
              <div>
                <img
                  :src="data[`compare_airpods_pro__e9uzt0mzviem_medium.png`]"
                />
              </div>
              <div class="text">
                <p class="p1">AirPods Pro</p>
                <br />
                <p>RMB 1999 起</p>
                <button>
                  <router-link to="/airpodsPro">购买</router-link>
                </button>
                <a href="#">进一步了解 > </a>
              </div>
            </div>
            <div class="airpodsmax">
              <div>
                <img
                  :src="data[`compare_airpods_max__b14s2x6q07rm_medium.png`]"
                />
              </div>
              <div class="text">
                <p class="p1">AirPods Max</p>
                <br />
                <p>RMB 4399 起</p>
                <button>
                  <router-link to="/airPodsMax">购买</router-link>
                </button>
                <a href="#">进一步了解 > </a>
              </div>
            </div>
            <div class="earphone-text">
              <ul>
                <li>
                  <div>
                    <p>—</p>
                  </div>
                </li>
                <li>
                  <div>
                    <img
                      :src="data[`icon_spatial_audio__kmoa5vlnkdmm_large.png`]"
                      alt=""
                    />
                    <div>
                      <p style="font-size: 14px">
                        支持动态头部追踪的<br />
                        空间音频
                      </p>
                    </div>
                  </div>
                </li>

                <li>
                  <div>
                    <img
                      :src="data[`icon_spatial_audio__kmoa5vlnkdmm_large.png`]"
                      alt=""
                    />
                    <div>
                      <p style="font-size: 14px">
                        支持动态头部追踪的<br />
                        空间音频
                      </p>
                    </div>
                  </div>
                </li>
                <li>
                  <div>
                    <img
                      :src="data[`icon_spatial_audio__kmoa5vlnkdmm_large.png`]"
                      alt=""
                    />
                    <div>
                      <p style="font-size: 14px">
                        支持动态头部追踪的<br />空间音频
                      </p>
                    </div>
                  </div>
                </li>
              </ul>
            </div>

            <div class="earphone-pic">
              <ul>
                <li>
                  <p>—</p>
                </li>
                <li>
                  <p>—</p>
                </li>
                <li>
                  <div>
                    <img
                      :src="
                        data[`icon_noise_cancellation__dte2s5scoscy_large.png`]
                      "
                      alt=""
                    />
                    <img
                      :src="data[`icon_transparency__fdepuo39ruum_large.png`]"
                      alt=""
                    />
                    <div>
                      <p style="font-size: 14px">主动降噪与通透模式</p>
                    </div>
                  </div>
                </li>
                <li>
                  <div>
                    <img
                      :src="
                        data[`icon_noise_cancellation__dte2s5scoscy_large.png`]
                      "
                      alt=""
                    />
                    <img
                      :src="data[`icon_transparency__fdepuo39ruum_large.png`]"
                      alt=""
                    />
                    <div>
                      <p style="font-size: 14px">主动降噪与通透模式</p>
                    </div>
                  </div>
                </li>
              </ul>
            </div>

            <div class="earphone-h">
              <ul>
                <li>
                  <div>
                    <p>—</p>
                  </div>
                </li>
                <li>
                  <div>
                    <img
                      :src="
                        data[`icon_water_resistent__6yj92ikcoiaa_large.png`]
                      "
                      alt=""
                    />
                    <div>
                      <p style="font-size: 14px">抗汗抗水</p>
                    </div>
                  </div>
                </li>
                <li>
                  <div>
                    <img
                      :src="
                        data[`icon_water_resistent__6yj92ikcoiaa_large.png`]
                      "
                      alt=""
                    />
                    <div>
                      <p style="font-size: 14px">抗汗抗水</p>
                    </div>
                  </div>
                </li>
                <li>
                  <div>
                    <p>—</p>
                  </div>
                </li>
              </ul>
            </div>

            <div class="earphone-c">
              <ul>
                <li>
                  <div>
                    <img
                      :src="
                        data[`icon_wireless_charging__e0t56m5mbxci_large.png`]
                      "
                      alt=""
                    />
                    <p style="font-size: 14px">闪电接口充电</p>
                  </div>
                </li>
                <li>
                  <div>
                    <img
                      :src="
                        data[`icon_wireless_charging__e0t56m5mbxci_large.png`]
                      "
                      alt=""
                    />
                    <p style="font-size: 14px">
                      MagSafe、无线及<br />
                      闪电接口充电
                    </p>
                  </div>
                </li>
                <li>
                  <div>
                    <img
                      :src="
                        data[`icon_wireless_charging__e0t56m5mbxci_large.png`]
                      "
                      alt=""
                    />
                    <div>
                      <p style="font-size: 14px">
                        MagSafe、无线及<br />
                        闪电接口充电
                      </p>
                    </div>
                  </div>
                </li>
                <li>
                  <div>
                    <img
                      :src="
                        data[`icon_wireless_charging__e0t56m5mbxci_large.png`]
                      "
                      alt=""
                    />
                    <div>
                      <p style="font-size: 14px">闪电接口充电</p>
                    </div>
                  </div>
                </li>
              </ul>
            </div>

            <div class="earphone-t">
              <ul>
                <li>
                  <div>
                    <br />

                    <p>
                      <span style="font-size: 24px; font: wight 500px">5</span
                      >小时
                    </p>
                    <p style="font-size: 14px">
                      单次充电聆听时间<br />
                      最长可达 5 小时
                    </p>
                  </div>
                </li>
                <li>
                  <div>
                    <br />
                    <p>
                      <span style="font-size: 24px; font: wight 500px">6</span
                      >小时
                    </p>
                    <p style="font-size: 14px">
                      单次充电聆听时间<br />
                      最长可达 6 小时
                    </p>
                  </div>
                </li>
                <li>
                  <div>
                    <br />

                    <p>
                      <span style="font-size: 24px; font: wight 500px">4.5</span
                      >小时
                    </p>
                    <p style="font-size: 14px">
                      单次充电聆听时间<br />
                      最长可达 4.5 小时
                    </p>
                  </div>
                </li>
                <li>
                  <div>
                    <br />

                    <p>
                      <span style="font-size: 24px; font: wight 500px">20</span
                      >小时
                    </p>
                    <p style="font-size: 14px">
                      单次充电聆听时间<br />
                      最长可达 20 小时
                    </p>
                  </div>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
      <div class="f7">
        <div class="cen">
          <div class="wei">
            <ul>
              <li>
                <img :src="data[`icon_large.svg`]" alt="" />
                <div>
                  <b>免费送货</b>
                  <p style="font-size: 14px; color: #1d1d1f">
                    享受送货上门服务，或前往<br />Apple Store零售店提取现货
                  </p>
                  <a href="#">进一步了解></a>
                </div>
              </li>

              <li>
                <img :src="data[`icon_large (1).svg`]" alt="" />
                <div>
                  <b>分期付款</b>
                  <p style="font-size: 14px; color: #1d1d1f">
                    符合条件的用户可选择灵活的分期付款方式。
                  </p>
                  <a href="#">进一步了解></a>
                </div>
              </li>

              <li>
                <img :src="data[`icon_large (2).svg`]" alt="" />
                <div>
                  <b>获得购买帮助</b>
                  <p style="font-size: 14px; color: #1d1d1f">
                    哟问题吗？致电Specialist专家<br />或进行在线交流。<br />致电400-666-8800
                  </p>
                  <a href="#">联系我们></a>
                </div>
              </li>

              <li>
                <img :src="data[`icon_large (3).svg`]" alt="" />
                <div>
                  <b>这一刻属于你</b>
                  <p style="font-size: 14px; color: #1d1d1f">
                    为你的AirPods刻上你的名字，或喜爱的表情符号。免费镌刻服务，<br />Apple独家福利
                  </p>
                  <a href="#">进一步了解></a>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import { Swiper, SwiperSlide } from "vue-awesome-swiper";
export default {
  name: "swiper-example-multiple-slides-per-biew",
  title: "Multiple slides per view",
  components: {
    Swiper,
    SwiperSlide,
  },
  data() {
    return {
      data: null,
      swiperOption: {
        slidesPerView: 3,
        spaceBetween: 30,
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
        },
      },
    };
  },
  methods: {
    getData() {
      let url = "http://localhost:3000/yshImg";
      axios.get(url).then((res) => {
        this.data = res.data;
        console.log(res.data);
      });
    },
    videoCtrl() {
      btn_play.onclick = function () {
        if (vd.paused) {
          vd.play();
          btn_play.innerHTML = "暂停";
        } else {
          vd.pause();
          btn_play.innerHTML = "播放";
        }
      };
    },
  },
  mounted() {
    this.getData();
  },
};
</script>

<style lang="less" scoped>
#airpods {
  width: 100%;
  height: 100%;
}
.swiper {
  width: 1700px;
}
.swiperSli {
  width: 320px !important;
  position: relative;
}
.swiperSli .abc {
  position: absolute;
  left: 20px;
  top: -50px;
}
.swiperSli P {
  font-size: 25px;
  font-family: 600;
}
.swiperSli ol {
  position: absolute;
  bottom: 0;
  // top: 0;
  left: 0;
}
.swiperSli {
  height: 349px;
}
.swiperSli ol > li {
  position: absolute;
  right: -200px;
  bottom: 0;
  color: #000;
}
</style>
<style scoped src="../assets/css/airpods.css"></style>

